<template>
  <div class="page-container">
    <van-nav-bar
      title="预约信息"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="list.length === 0 ? '暂无数据' : '没有更多了'"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id">
          <div slot="default">
            <div class="goods-container">
              <van-image
                width="80px"
                height="80px"
                :src="item.image"
                class="van-col imageBorder"
              />
              <van-row class="content-box">
                <div class="content-name">{{ item.store_name }}</div>
                <div class="content-des">
                  姓名：{{ item.patient }}
                  {{
                    `  共${item.total_appointment_num}次第${item.cur_times}次`
                  }}
                </div>
                <div class="content-des">
                  预约：{{ item.date }} {{ item.time_name }}
                </div>
                <!-- <div class="content-des">
                  {{ `共${item.total_appointment_num}次第${item.cur_times}次` }}
                </div> -->
                <div :class="[4, 5].includes(item.status) ? 'content-des' : ''">
                  状态: {{ item.status_text }}
                </div>
                <van-tag
                  v-if="item.status === 3"
                  round
                  type="primary"
                  size="large"
                  class="bottom_right_icon"
                  @click="showRecordDialog(item)"
                >确认</van-tag>
                <van-tag
                  v-if="
                    item.status === 1 &&
                      !item.appointment_day &&
                      !(repeat_num > 0)
                  "
                  round
                  type="warning"
                  size="large"
                  class="bottom_right_icon"
                  @click="cancelAppoint(item)"
                >取消</van-tag>
              </van-row>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-dialog
      v-model="recordDialogVisible"
      title="请确认养眼记录"
      :show-cancel-button="true"
      :show-confirm-button="true"
      close-on-click-overlay
      @confirm="confirmAppoint"
    >
      <div class="dialog-container">
        <van-row class="dialog-van-row">
          <van-col
            span="12"
          >疗前左视: {{ appointmentData.bef_eye_left }}</van-col>
          <van-col
            span="12"
          >疗前右视: {{ appointmentData.bef_eye_right }}</van-col>
        </van-row>
        <van-row class="dialog-van-row">
          <van-col
            span="24"
          >疗前备注: {{ appointmentData.bef_eye_remark }}</van-col>
        </van-row>
        <van-row class="dialog-van-row">
          <van-col
            span="12"
          >疗后左视: {{ appointmentData.aft_eye_left }}</van-col>
          <van-col
            span="12"
          >疗后右视: {{ appointmentData.aft_eye_right }}</van-col>
        </van-row>
        <van-row class="dialog-van-row">
          <van-col
            span="24"
          >疗后备注: {{ appointmentData.aft_eye_remark }}</van-col>
        </van-row>
      </div>
    </van-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getAppointList, changeAppoint } from '@/api/store'
import { Button, List, PullRefresh, Card, Tag, Toast, Dialog } from 'vant'
export default {
  name: 'Home',
  components: {
    [Button.name]: Button,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Card.name]: Card,
    [Tag.name]: Tag,
    [Toast.name]: Toast
  },
  data() {
    return {
      list: [],
      loading: false, // 列表loading
      finished: false, // 是否完成加载
      refreshing: false,
      filterData: {
        limit: 10,
        page: 0
      },
      recordDialogVisible: false,
      appointmentData: {}
    }
  },
  created() {},
  methods: {
    getList(refresh) {
      const _self = this
      getAppointList(this.filterData).then((res) => {
        if (res.error.code === 0) {
          // 加载状态结束
          _self.loading = false
          // 数据全部加载完成
          if (refresh === 'refresh') {
            this.list = res.data.list
          } else {
            const tempList = [...this.list, ...res.data.list]
            this.list = tempList
          }
          if (this.list.length >= res.data.totalCount) {
            _self.finished = true
          } else {
            _self.finished = false
          }
        }
      })
    },
    onLoad() {
      this.filterData.page += 1
      this.getList()
    },
    onRefresh() {
      this.refreshing = false
      this.finished = true // 防止下拉刷新发送了两次请求的问题
      this.filterData.page = 1
      this.getList('refresh')
      this.list = []
    },
    // 返回
    onClickLeft() {
      this.$router.go(-1)
    },
    // 已完成的预约-点击确认查看记录，并确认完成
    showRecordDialog(data) {
      this.appointmentData = data
      this.recordDialogVisible = true
    },
    // 确认 状态： 1已预定（已锁） 2已付款（进行中） 3已完成 4已结束 5 (取消/自动取消)已解锁  6-待分账 7-分账成功 8-分账失败
    confirmAppoint() {
      const saveData = {
        id: this.appointmentData.id,
        status: 4
      }
      changeAppoint(saveData).then((res) => {
        if (res.error.code === 0) {
          Toast('操作成功')
          this.getList('refresh')
        }
      })
    },
    // 取消
    cancelAppoint(data) {
      Dialog.confirm({
        title: '',
        message: '确定取消预约吗？',
        showCancelButton: true
      }).then(() => {
        const saveData = {
          id: data.id,
          status: 5
        }
        changeAppoint(saveData).then((res) => {
          if (res.error.code === 0) {
            Toast('操作成功')
            this.getList('refresh')
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.van-pull-refresh {
  .van-list {
    min-height: calc(100vh - 56px);
  }
}
.page-container {
  box-sizing: border-box;
  overflow: auto;
}
.van-list {
  margin-top: 10px;
}
.goods-container {
  padding: 5px;
  position: relative;
}
.content-box {
  background-color: #fff;
}
.van-cell {
  margin-bottom: 10px;
  border-radius: 3px;
  padding: 0;
}
.van-list .van-cell {
  box-shadow: 0px 10px 13px -13px #c7d3ed;
}
.van-cell:not(:last-child)::after {
  border-bottom: 0;
}
.imageBorder {
  border: 1px solid #f4f5f9;
  margin-right: 10px;
}
.content-name {
  font-size: 14px;
}
.content-des {
  color: #cbcbcb;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.content-status {
  color: #cbcbcb;
}
.dialog-container {
  margin-top: 10px;
  font-size: 14px;
  padding: 10px;
}
.dialog-van-row {
  padding: 5px 0;
}
.bottom_right_icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>
